<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
	<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
	<meta name="apple-mobile-web-app-capable" content="yes"/>
	<style>
		.adminlistitem {
			font-size:12px;
			margin-right: 10px;
			padding-right: 10px;
			line-height: 59px; /* 20px; */
			height: 59px;  
		}	
		.admin2LineListItem1 {
			height: 16px; 
			color: #222222;
			font-weight: bold;
			margin: -8px 0px 10px 8px;
		}
		.admin2LineListItem2 {
			height: 16px; 
			color: #464646;
			font-weight: normal;
			margin: -13px 0 10px 8px;
		}
		
	</style>

	<title>MVC WidgetList with EdgeToEdgeList with icons and sub-label</title>

	<script type="text/javascript" src="../../../../dojox/mobile/deviceTheme.js" data-dojo-config="mblThemeFiles: ['base']"></script>

	<!-- required: dojo.js -->
	<script type="text/javascript" src="../../../../dojo/dojo.js"
		data-dojo-config="isDebug: true, async: true, parseOnLoad: false, mvc: {debugBindings: true}"></script>

	<script type="text/javascript">
		require([
			"dojo/_base/lang",
			"dijit/registry",
			"dojo/parser",
			"dojo/store/Memory",
			"dojo/ready",
			"dojo/when",
			"dojox/mvc/EditStoreRefListController",
			"dojox/mvc/at",
			"dojox/mvc/Group",
			"dojox/mvc/Repeat",
			"dojox/mvc/Templated",
			"dojox/mvc/WidgetList",
			"dojox/mvc/Output",
			"dojox/mobile",
			"dojox/mobile/Button",
			"dojox/mobile/TextBox",
			"dojox/mobile/CheckBox",
			"dojox/mobile/EdgeToEdgeList",
			"dojox/mvc/WidgetList",
			"dojox/mvc/_InlineTemplateMixin",
			"dojox/mobile/deviceTheme"
		], function(lang, registry, parser, MemoryStore, ready, when, EditStoreRefListController){
			var projects_init1 = {
  				"identifier": "id",
   				"items": [ 
                    {
                        "id"  : "ID1001",
                        "label"   : "Project 01",
                        "displayName"   : "Project 01",
                        "shortDesc"    : "Short Description for project 01",
                        "longDesc"    : "Long Description for project 01",
                        "checked" : true,
                        "icon" : "../images/directory_45.png"
                    },
                    {
                        "id"  : "ID1002",
                        "label"   : "Project 02",
                        "displayName"   : "Project 02",
                        "shortDesc"    : "Short Description for project 02",
                        "longDesc"    : "Long Description for project 02",
                        "checked" : true,
                        "icon" : "../images/directory_45.png"
                    },
                    {
                        "id"  : "ID1003",
                        "label"   : "Project 03",
                        "displayName"   : "Project 03",
                        "shortDesc"    : "Short Description for project 03",
                        "longDesc"    : "Long Description for project 03",
                        "checked" : false,
                        "icon" : "../images/directory_45.png"
                    }
                ]
};

			var memStore1 = new MemoryStore({data : projects_init1});

			ctrl = new EditStoreRefListController({store: memStore1});
			when(ctrl.queryStore(), function(data){
				model1 = ctrl.model;
			});

			
			// when "dojo/ready" is ready call parser.parse (if not doing parseOnLoad)
			ready(function(){
				parser.parse();
			});
			
		});
		
	</script>
</head>
<body style="visibility:hidden;">
	<script type="dojo/require">at: "dojox/mvc/at"</script>
	<script type="dojo/require">registry: "dijit/registry"</script>
		<div id="wrapper">
			<div id="header">
				<div id="navigation"></div>
				<div id="headerInsert">
					<h4>MVC WidgetList with EdgeToEdgeList with icons and sub-label</h4>
				</div>
			</div>
			<div id="main">
				<div id="leftNav"></div>
				<div id="mainContent">
					<h5>EdgeToEdgeList with a WidgetList with child type of ListItem, sets label, icon and checked and multiple select.</h5>
					<ul data-dojo-type="dojox.mobile.EdgeToEdgeList" id="repeatId1B" select="multiple"
						data-dojo-mixins="dojox/mvc/WidgetList"
						data-mvc-child-type="dojox/mobile/ListItem"
						data-mvc-child-props="label: at(this.target, 'displayName'), 
											icon:  at(this.target, 'icon'),
											checked: at(this.target, 'checked'), 
											variableHeight: true"
						data-dojo-props="children: model1">
					</ul>

					<h5>EdgeToEdgeList with a WidgetList with child type of mvc/Templated with ListItem mixin, sets label, icon and checked and multiple select.</h5>					
					<ul data-dojo-type="dojox.mobile.EdgeToEdgeList" id="repeatId1"
						data-dojo-props='select:"multiple", children: model1'
						data-dojo-mixins="dojox/mvc/WidgetList,dojox/mvc/_InlineTemplateMixin"
						data-mvc-child-type="dojox/mvc/Templated"
						data-mvc-child-mixins="dojox/mobile/ListItem"
						data-mvc-child-props="clickable: true, 
												_relTargetProp: 'childTarget',  // avoid using target for a ListItem since it uses that
	   	                          				icon:  at(this.childTarget, 'icon'), // setting icon:  '../images/directory_45.png' works
                              					noArrow: true,
                              					indexAtStartup: this.indexAtStartup,
												checked: at(this.childTarget, 'checked'),
                              					onClick: function(e){                              						
                              						console.log(this.id);
                              						console.log(e);
                              						console.log(registry.byId(this.id));
                              						console.log(this.indexAtStartup); return true;}">
						<script type="dojox/mvc/InlineTemplate">
							<li class="adminlistitem">
                   			  <div class="mblListItemLabel">
    					    		<div class="admin2LineListItem1" data-dojo-type="dojox/mvc/Output" 
    					    			data-dojo-props="value: at('rel:','displayName')"></div> 
	    				    		<div class="admin2LineListItem2" data-dojo-type="dojox/mvc/Output" 
	    				    			data-dojo-props="value: at('rel:','shortDesc')"></div> 
			                  </div>
		            		</li>
						</script>
					</ul>
					
					<h5>WidgetList with an mvc/InlineTemplate, you can change the label, or checked here.</h5>					
					<div id="repeatId2" data-dojo-type="dojox/mvc/WidgetList"
					 data-dojo-mixins="dojox/mvc/_InlineTemplateMixin"
					 data-dojo-props="children: model1">
						<script type="dojox/mvc/InlineTemplate">
							<div>
								<input class="cell"
									data-dojo-type="dojox/mobile/TextBox" 
									data-dojo-props="value: at('rel:', 'displayName')">
								<label for="CBInput${indexAtStartup}"
									data-dojo-type="dijit/_WidgetBase"
									data-dojo-props="_setValueAttr: {node: 'domNode', type: 'innerText'}, value: at('rel:', 'displayName')"></label>
								<input class="cell" type="checkbox" id="CBInput${indexAtStartup}"
									data-dojo-type="dojox/mobile/CheckBox"
									data-dojo-props="checked: at('rel:', 'checked')">
							</div>
						</script>
					</div>					
					</div>
				</div>
			</div>
		</div>
	</body>
</html>
